import React, { useState, useEffect } from 'react'
import { Button, Card, Table, Modal, Form, Input, Select } from "antd"
import { Link } from "react-router-dom"
import { findAllCategory } from "@/apis/category"

const { Option } = Select
const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 8,
    span: 16,
  },
};

export default function ProductCategory() {
  const [data, setData] = useState([])
  const [parentId, setParentId] = useState(0)
  const [isModalOpen, setIsModalOpen] = useState(false)
  const [parentNode,setParentNode] = useState(false)

  useEffect(() => {
    fetchData()
  }, [parentId])

  // 表头
  const columns = [
    {
      title: '类型名字',
      dataIndex: 'name',
      align: 'center',
      render: (text) => <a>{text}</a>,
    },
    {
      title: '类别',
      dataIndex: 'type',
      align: 'center'
    },
    {
      title: '操作',
      render: (pa1, pa2) => {
        return (
          <>
            {parentId == 0 ? <Button type='primary' onClick={() => findSubsCategory(pa1)}>查看子分类</Button> : null}
            &nbsp;&nbsp;&nbsp;&nbsp;
            <Button>删除</Button>
          </>
        )
      }
    },
  ];


  const fetchData = async () => {
    const res = await findAllCategory({ parentId })
    console.log(res);
    setData(res.data.data.data)
  }


  const findSubsCategory = (value) => {
    const id = value._id
    setParentId(id)
  }

  const back = () => {
    setParentId(0)
  }

  const handleOk = () => {
    setIsModalOpen(false)
  }
  const handleCancel = () => {
    setIsModalOpen(false)
  }

  const addCategory = () => {
    setIsModalOpen(true)
  }

  const onFinish = (values) => {
    values.parentId = values.parentId?values.parentId:0
    console.log(values);
  }

  const typeChange = (value)=>{
    console.log(value);
    if(value=="二级分类"){
      setParentNode(true)
    }else{
      setParentNode(false)
    }
  }

  return (
    <React.Fragment>

      <Card
        title={parentId == 0 ? "商品分类" : <Button onClick={back}>返回</Button>}
        extra={<Button onClick={addCategory} type="default">添加分类</Button>}
        style={{
          width: "100%",
        }}
      >
        <Table
          dataSource={data}
          columns={columns}
          bordered={true}
          loading={false}
          rowKey="_id"
          pagination={{ defaultCurrent: 1, defaultPageSize: 5, pageSizeOptions: [5, 10, 15], showSizeChanger: true, showQuickJumper: true }}
        >
        </Table>
      </Card>
      <Modal title="添加分类" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
        <Form
          name="control-hooks"
          onFinish={onFinish}
          style={{
            maxWidth: 600,
          }}
        >
          <Form.Item
            name="name"
            label="分类名字"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="type"
            label="分类类型"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <Select
              placeholder="Select a option and change input text above"
              allowClear
              onChange={typeChange}
            >
              <Option value="一级分类">一级分类</Option>
              <Option value="二级分类">二级分类</Option>
            </Select>
          </Form.Item>
          {parentNode?<Form.Item
            name="parentId"
            label="父级类型"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <Select
              placeholder="Select a option and change input text above"
              allowClear
            >
              <Option value="2726372">家用电器</Option>
              <Option value="3478374">数码产品</Option>
            </Select>
          </Form.Item>:null}
          <Form.Item>
            <Button type="primary" htmlType="submit">
              Submit
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </React.Fragment >
  )
}
